<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#container {
			position: relative;
			width: 300px;
			height: 300px;
			overflow: hidden;
		}

		.page {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}

		.page:first-child {
			z-index: 1;
		}

		.page:last-child {
			z-index: 0;
			opacity: 0;
		}

		.round1 {
			animation: roundToRight 1s linear forwards;
		}

		@keyframes roundToRight {
			0% {
				z-index: 1;
				transform: translate(0, 0) scale(1);
			}

			100% {
				z-index: 0;
				transform: translate(100%, 0) scale(0.5);
			}
		}

		.round2 {
			animation: roundToLeft 1s linear forwards;
		}

		@keyframes roundToLeft {
			0% {
				z-index: 1;
				transform: translate(50%, 0) scale(0.5);
				opacity: 1;
			}

			100% {
				z-index: 0;
				transform: translate(0, 0) scale(1);
				opacity: 1;
			}
		}
	</style>
</head>

<body>
	<div id="container">
		<iframe class="page" src="./index0.html"></iframe>
	</div>
	<script src="../js/jquery.js"></script>
	<script>
		function TurnScreen(options) {
			const self = this;
			this.options = options;
			this.index = 1;
			this.timer = null;
			this.setIFrame = function () {
				let iframe = (`<iframe class="page" src="./index${this.index}.html"></iframe>`);
				console.log('insert:',iframe)
				$('#container').append(iframe);
			}
			this.play = function () {
				this.timer = setInterval(() => {
					let pages = $('.page');
					pages.eq(0).addClass('round1');
					pages.eq(1).addClass('round2');
				}, this.options.interval);
			}
			// 给当前第一个动画绑定事件
			this.initEvent = function () {
				$('#container').on('webkitAnimationStart', '.page:first-child', function () {
					console.log('start')
				})
				$('#container').on('webkitAnimationEnd', '.page:first-child', function () {
					// debugger
					console.log('end', this)
					$('.page').removeClass('round1 round2')
					setTimeout(()=>{
						$(this).remove();
					})
					if (++self.index >= self.options.list.length) {
						self.index = self.index % self.options.list.length;
					}
					self.setIFrame();
				})
			}
			// debugger
			this.initEvent();
			this.setIFrame();
			this.play();
		}
		let turnScreen = new TurnScreen({
			list: [1, 2, 3],
			interval: 5000
		});
	</script>
</body>

</html>